<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Welcome to VigorLoop!</title>

    <!-- Bootstrap 核心 CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/bootstrap/css/cover.css" rel="stylesheet">
    <style>
        /* 顶部 Header 样式 */
        .header {
            display: flex;
            justify-content: space-between; /* 两端对齐 */
            align-items: center; /* 垂直居中 */
            padding: 10px 20px;
            border-bottom: 1px solid #ccc;
        }

        .header img {
            height: 100px; /* 调整 Logo 高度 */
        }

        /* 导航栏样式 */
        .nav.masthead-nav {
            display: flex; /* 使用 flex 布局 */
            gap: 20px; /* 导航项之间的间距 */
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav.masthead-nav li {
            /* 不需要额外的样式，因为 flex 已经处理布局 */
        }

        .nav.masthead-nav a {
            text-decoration: none;
            color: #fff;
            font-size: 16px;
        }

        .nav.masthead-nav a:hover {
            color: #007BFF; /* 悬停时颜色变化 */
        }
    </style>
</head>

<body>

<div class="site-wrapper">

    <div class="site-wrapper-inner">

        <div class="cover-container">

            <!-- 顶部 Header -->
            <div class="header">
                <img src="/static/nifty/img/logo.png" alt="Logo">
                <nav>
                    <ul class="nav masthead-nav">
                        <li class="active"><a href="#">主页</a></li>
                        <li id="about-link"><a href="about/">关于</a></li>
                        <li id="contact-us-link"><a href="contact_us/">联系我们</a></li>
                    </ul>
                </nav>
            </div>

            <div class="inner cover" style="height: 70vh">
                <h1 class="cover-heading">VigorLoop</h1>
                <p class="lead">智慧健康管理，开启健康生活新篇章</p>
                <p class="lead">
                    <a href="login/" class="btn btn-lg btn-default">登录</a>
                </p>
            </div>

            <div class="about-modal" style="display:none;">
                <h2>关于 VigorLoop</h2>
                <p>这里是关于 VigorLoop 的介绍内容。</p>
            </div>

        </div>

    </div>

</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
</body>
</html>
